<template>
    <div class="HeaderBox">
        <!-- <el-row class="logo-and-title align-items" v-if="innerHeight.toFixed(3) <= 1.778"> -->
        <el-row class="logo-and-title align-items">
            <el-col :span="8">
                <el-row @click="checkSystem">
                    <el-col :span="24" class="row align-items school-msg-box">
                        <div class="logo-box"></div>
                        服务器状态
                        <div class="success-system-status">
                            <Dot class="dot-view" status="success"></Dot>正常
                        </div>
                    </el-col>
                </el-row>
            </el-col>
            <el-col :span="8" style="text-align: center;">
                <el-image :src="btImg"></el-image>
            </el-col>
            <el-col :span="8">
                <el-row type="flex" justify="end" class="align-items school-msg-box">
                    {{ dayFont }} <label>{{ timesFont }}</label>
                </el-row>
            </el-col>
        </el-row>
        <el-dialog class="dialog-box" v-model="dialogVisible" :show-close="false" :close-on-click-modal="false">
            <div class="close-img-box">
                <el-image :src="closeImg" @click="dialogVisible = false"></el-image>
            </div>
            <el-row :gutter="15">
                <el-col :span="12">
                    <StatusComponents :index="1"></StatusComponents>
                </el-col>
                <el-col :span="12">
                    <StatusComponents :index="2"></StatusComponents>
                </el-col>
            </el-row>
        </el-dialog>
    </div>
</template>
<script lang="ts" setup>
import btImg from '../../assets/images/biaoti.png'
import closeImg from '../../assets/images/icon_close@2x.png'
import { PiniaStore } from '../../store/index'
import Dot from './Dot.vue'
import { ref, onMounted, onUnmounted } from "vue";
import $util from "../../util/util";
const innerHeight = ref<any>(document.documentElement.clientWidth / document.documentElement.clientHeight)
const store = PiniaStore()
const timesFont = ref('')
const dayFont = ref('')
const setTimew = ref<any>(null)
const dialogVisible = ref<any>(false)
const getTimes = async (val:any) => {
    let times = val
    setTimew.value = setInterval(() => {
        times = times + 1
        dayFont.value = $util.changeDate(times, 1)
        timesFont.value = $util.changeDate(times, 2)
    }, 1000)
}
const checkSystem = async () => {
    await getMonitor()
    await getMonitor2()
}
const getMonitor = async () => {
    await fetch('https://mall.hlzhjy.com/Server01/').then(response => response.json())
    .then(res => {
        store.setMonitorList(res.data)
    }).catch(error => {
        console.error('There was an error!', error);
    });
}
const getMonitor2 = async () => {
    await fetch('https://mall.hlzhjy.com/Server02/').then(response => response.json())
    .then(res => {
        store.setMonitorList2(res.data)
    }).catch(error => {
        console.error('There was an error!', error);
    });
    dialogVisible.value = true
}
onMounted(async () => {
    window.addEventListener('resize', () => {
        setTimeout(async () => {
            innerHeight.value = document.documentElement.clientWidth / document.documentElement.clientHeight
        }, 0)
    })
});
onUnmounted(() => {
    clearInterval(setTimew.value)
});
defineExpose({ getTimes})

</script>
<style lang="scss" scoped>
.HeaderBox {
    color: #ffffff;
    font-weight: bold;
    // height: 80px;

    .logo-and-title {
        padding: 0 40px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        background-image: url("@/assets/images/headBg.png");
        background-size: 100% 100%;
        height: 80px;

        label {
            font-size: 20px;
            margin-left: 15px;
        }

        .school-msg-box {
            font-size: 20px;

            .logo-box {
                width: 48px;
                height: 48px;
                box-sizing: border-box;
                border-radius: 50%;
                margin-right: 20px;
                background-image: url('@/assets/images/icon_fuwuqi.png');
                background-size: 100% 100%;
            }

            .success-system-status {
                color: #4bd28f;
                font-weight: bold;
                font-size: 20px;
                display: flex;
                align-items: center;
                padding-left: 40px;

                .dot-view {
                    margin-right: 15px;
                }
            }
        }
    }
}

.dialog-box {
    position: relative;

    .close-img-box {
        position: absolute;
        right: -15px;
        top: -5px;

        .el-image {
            width: 30px;
            cursor: pointer;
        }
    }
}
</style>
<style lang="scss">
.el-dialog {
    background-color: transparent !important;
    background-image: url('@/assets/images/bg_tanchuang@2x.png') !important;
    background-size: 100% 100% !important;
    height: 710px;
    padding: 0 15px;
    box-sizing: border-box;
}
</style>